<template>
	<div>
		<!-- 确保内容存在且正确 -->
		<div style="font-size: 26px;">维保记录</div>
		<el-form ref="elForm" :model="formData" size="medium" label-width="100px" class="wblog" label-position="top">
			<el-row :gutter="40">
				<el-col :span="3.5">
					<el-form-item label="记录状态" prop="field104">
						<el-select v-model="fromdata.static" placeholder="" size="mini" style="width: 240px">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="5.5">
					<el-form-item label="计划时间" prop="field104">
						<div class="block">
							<!-- <span class="demonstration">Default</span> -->
							<el-date-picker v-model="f1" type="daterange" range-separator="To"
								start-placeholder="Start date" end-placeholder="End date" :size="size"
								format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
						</div>
					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item label="维保完成日期" prop="field104">
						<div class="block">
							<!-- <span class="demonstration">Default</span> -->
							<el-date-picker v-model="f2" type="daterange" range-separator="To"
								start-placeholder="Start date" end-placeholder="End date" :size="size"
								format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label-width="180px" label="维保完成时长（分钟）" prop="field106">
						<div style="display: flex; align-items: center; width: 100%;">
							<el-input v-model="fromdata.startCompletionTime" style="width: 120px"
								placeholder="Please input" />
							<span>-</span>
							<el-input v-model="fromdata.endCompletionTime" style="width: 120px"
								placeholder="Please input" />
						</div>
					</el-form-item>
				</el-col>
				<el-col :span="2">
					<el-form-item size="mini" style="margin-left: -82px;margin-top: 30px;">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="rest" >重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>
		
		<el-table :data="tableData" stripe class="transparent-table">
			<el-table-column prop="maintenanceCorporationId" label="序号" />
			<el-table-column prop="maintenanceStaffName" label="维保人员" />
			<el-table-column prop="maintenanceCorporationName" label="维保单位" />
			<el-table-column prop="planStartTime" label="计划开始时间" />
			<el-table-column prop="planEndTime" label="计划结束时间" />
			<el-table-column prop="status" label="状态" />
			<el-table-column prop="finishTime" label="完成时间" />
			<el-table-column prop="finishTimeSpan" label="完成时长" />

		</el-table>
		   <el-pagination  class="page"
		        layout="prev, pager, next" 
		        :total="total"
		        :current-page="fromdata.page"
		        @current-change="handlePageChange"
		      />
	</div>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onBeforeMount,
		watch
	} from 'vue';


	const tableData = ref([])
	
	let total = ref(0)

	import {
		maintenanceRecordPage
	} from '@/api'


	const fromdata = reactive({
		registrationCode: undefined,
		
		'static': '',
		startPlanTime: '', //计划开始时间
		endPlanTime: '',  //计划结束时间
		
		
		
		startFinishTime: '', //维保完成-开始时间
		endFinishTime: '', //维保完成-结束时间
		
		endCompletionTime: '',//维保完成时长-终（分钟）
		startCompletionTime: '', //维保完成时长-起（分钟）	
		 
		 page:1
	})
	
	const handlePageChange = (val) => {
	      fromdata.page = val
	      console.log('切换到页码:', val)
		  aa()
	      // 这里可以添加数据加载逻辑
	    }
	
	const aa = () => {
		console.log(param.registrationCode);
		fromdata.registrationCode = param.registrationCode
		maintenanceRecordPage(fromdata).then(r => {
			console.log(r)
			tableData.value = r.data.content
			total.value = r.data.totalElements
		})
	}

	onBeforeMount(() => {
		aa()
	})
	const param = defineProps(["registrationCode"])

	// 监听 registrationCode 变化
	watch(() => param.registrationCode, (newVal) => {
		aa();
	}, {
		immediate: false
	});

	const value = ref('')




	const options = [{
			value: '1',
			label: '未开始',
		},
		{
			value: '2',
			label: '已签到',
		},
		{
			value: '3',
			label: '已完成',
		},
		{
			value: '4',
			label: '已审核',
		},

	]

	const f1 = ref([])
	const f2 = ref([])
	const submitForm = () => {
		// 表单校验
		console.log(123123)
		

		fromdata.startPlanTime = f1.value[0]
		fromdata.endPlanTime = f1.value[1]
		// fromdata.startPlanTimearray = undefined	
		
		fromdata.startFinishTime = f2.value[0]
		fromdata.endFinishTime = f2.value[1]
		// fromdata.startCompletionTimearray = undefined	 
		 
		aa()

	}
	
	const rest = ()=>{
		
		fromdata.static = ''
		fromdata.startPlanTime = ''
		fromdata.endPlanTime = ''
		fromdata.startFinishTime = ''
		fromdata.endFinishTime = ''
		fromdata.endCompletionTime = ''
		fromdata.startCompletionTime = ''
		f1.value = []
		f2.value = []
		aa()
	}
</script>
<style scoped>
	.wblog {
		padding: 20px;
		/* Add some padding for spacing within the dialog */
	}

	/* Style form item labels to be clearly visible against the dialog's background */
	:deep(.el-form-item__label) {
		color: #00007f !important;
		/* Light grey, slightly less bright than pure white for subtlety */
		/* text-shadow: 0 0 3px rgba(100, 180, 255, 0.6); /* Optional: subtle glow */
		font-size: 16px !important;
		text-shadow:
			1px 1px 0 white,
			-1px 1px 0 white,
			1px -1px 0 white,
			-1px -1px 0 white;
	}



	/* Placeholder text styling */
	.wblog .el-input__inner::placeholder,
	.wblog .el-select .el-input__inner::placeholder,
	.wblog .el-textarea__inner::placeholder,
	.wblog .el-date-editor .el-input__inner::placeholder {
		color: #ffffff !important;
		/* Softer color for placeholder */
	}

	/* Focused state for inputs */
	.wblog .el-input__inner:focus,
	.wblog .el-select .el-input__inner:focus,
	.wblog .el-textarea__inner:focus,
	.wblog .el-date-editor.el-input:focus-within .el-input__inner

	/* For date pickers */
		{
		border-color: rgba(0, 200, 255, 0.8) !important;
		box-shadow: 0 0 8px rgba(0, 150, 255, 0.7), inset 0 0 5px rgba(0, 100, 200, 0.3);
		/* Glow effect on focus */
	}

	/* Styling for dropdowns (el-select, el-date-picker poppers) */
	/* These need to be global or use deep selectors if wblog.vue style is scoped. Assuming unscoped for now. */
	.el-select-dropdown,
	.el-picker-panel {
		background-color: rgba(10, 25, 50, 0.95) !important;
		/* Dark, techy background for dropdowns */
		border: 1px solid rgba(0, 150, 255, 0.7) !important;
		box-shadow: 0 0 15px rgba(0, 100, 255, 0.5);
	}

	/* Buttons styling */
	.wblog .el-button--primary {
		background: linear-gradient(135deg, #007bff, #0056b3) !important;
		border: 1px solid #0056b3 !important;
		color: #ffffff !important;
		box-shadow: 0 0 8px rgba(0, 123, 255, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.2);
		transition: all 0.3s ease;
	}

	.wblog .el-button--primary:hover {
		background: linear-gradient(135deg, #0056b3, #003d80) !important;
		border-color: #003d80 !important;
		box-shadow: 0 0 12px rgba(0, 123, 255, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.3);
	}

	.wblog .el-button {
		/* Default/Reset button */
		background-color: rgba(50, 70, 100, 0.5) !important;
		border: 1px solid rgba(0, 150, 255, 0.5) !important;
		color: #c0c4cc !important;
		transition: all 0.3s ease;
	}

	.wblog .el-button:hover {
		background-color: rgba(70, 90, 120, 0.7) !important;
		border-color: rgba(0, 200, 255, 0.8) !important;
		color: #ffffff !important;
	}

	/* Range separator in date pickers */

	.wblog .el-range__icon,
	.wblog .el-range__close-icon {
		/* Icons in date range picker */
		color: #c0c4cc !important;
	}

	:deep(.el-table) {
		background-color: transparent;
		color: white;
	}

	:deep(.el-table th),
	:deep(.el-table tr),
	:deep(.el-table td) {
		background-color: transparent !important;
		color: white;
	}

	:deep(.el-table--border .el-table__cell) {
		border-color: rgba(255, 255, 255, 0.1);
	}
	
	.transparent-table{
		margin: 0 30px;
		width: 84vw;
	}
	.page{
		margin: 50px 30vw;
	}
</style>